<!--
  培训列表-课程卡片

  props:
    flagText string 课程标签文案 default：教案
    flagBgColor string 课程标签背景颜色 default：#527BEE
    flagColor string 课程标签文案字体颜色 default：#FFFFFF
    title string 标题
    src string 头像地址
    uploader string 课程上传人员
    uploadTime string 上传时间

  event：
    click-ellipsis 查看更多 点击右侧省略号
-->
<template>
  <div class="course-card" :style="varStyle">
    <f7-card>
      <f7-card-content>
        <div class="type">
          <div class="left">
            <div class="flag">{{flagText}}</div>
            <span class="text">{{title}}</span>
          </div>
          <div class="right">
            <f7-icon f7="ellipsis" @click="onClickEllipsis"></f7-icon>
          </div>
        </div>
        <div class="info">
          <div class="left">
            <div class="head-portrait">
              <img :src="src" alt="head-portrait">
            </div>
            <span class="info-author">上传人：{{uploader}}</span>
          </div>
          <div class="right">
            <span class="time">{{uploadTime}}</span>
          </div>
        </div>
      </f7-card-content>
    </f7-card>
  </div>
</template>

<script>
import defaultHead from "/static/img/list/pic_touxiang.png"
export default {
  name: "qm-course-card",
  props: {
    flagText: {
      type: String,
      default: "教案"
    },
    flagBgColor: {
      type: String,
      default: "#527BEE"
    },
    flagColor: {
      type: String,
      default: "#FFF"
    },
    title: {
      type: String,
      default: "上课用材"
    },
    src: {
      type: String,
      default: require("/static/img/list/pic_touxiang.png")
    },
    uploader: {
      type: String,
      default: "系统管理员"
    },
    uploadTime: {
      type: String,
      default: "2022-3-8"
    }
  },
  data() {
    return {
      defaultHead
    }
  },
  computed: {
    varStyle() {
      return ({
        "--flag-bg-color": this.flagBgColor,
        "--flag-color": this.flagColor
      })
    }
  },
  methods: {
    onClickEllipsis() {
      this.$emit("click-ellipsis");
    }
  }
}
</script>

<style lang="less" scoped>
.course-card {
  margin-bottom: calc(20px * var(--ratio));
  &:last-child {
    margin-bottom: 0;
  }
}
.card {
  margin: 0;
  box-shadow: 0 calc(6px * var(--ratio)) calc(14px * var(--ratio)) 0 rgba(0, 0, 0, 0.05);
  border-radius: calc(16px * var(--ratio));
  .card-content {
    padding: calc(36px * var(--ratio)) calc(30px * var(--ratio)) calc(30px * var(--ratio));

    .type {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: calc(32px * var(--ratio));

      .left {
        display: flex;
        align-items: center;
        .flag {
          display: inline-block;
          width: calc(80px * var(--ratio));
          height: calc(40px * var(--ratio));
          background-color: var(--flag-bg-color);
          font-size: var(--font-size-subcontent-2);
          color: var(--flag-color);
          text-align: center;
          line-height: calc(40px * var(--ratio));
          border-radius: calc(20px * var(--ratio)) 0 calc(20px * var(--ratio)) 0;
        }
        .text {
          margin-left: calc(10px * var(--ratio));
          color: #242424;
          font-size: var(--font-size-subtitle);
          font-weight: 500;
          line-height: calc(45px * var(--ratio));
        }
      }

      .right {
        color: #8998AC;
      }
    }

    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--font-size-subcontent);

      .left {
        display: flex;
        align-items: center;

        .head-portrait  {
          margin-right: calc(10px * var(--ratio));
          width: calc(60px * var(--ratio));
          height: calc(60px * var(--ratio));

          img {
            width: 100%;
          }
        }

        .info-author {
          color: #61677A;
        }
      }

      .right {
        color: #8998AC;
      }
    }
  }
}
</style>
